<template>
<div>
  <el-form :inline="true" :model="searchForm" class="demo-form-inline" style="margin-top: 20px;margin-left: 20px">
    <el-form-item label="停车场名称" >
      <el-input v-model="searchForm.parkingLotName" placeholder="请输入停车场名称"></el-input>
    </el-form-item>
    <el-form-item label="车位名称">
      <el-input v-model="searchForm.parkingSpaceName" placeholder="请输入停车位名称"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSearch">查询</el-button>
      <el-button type="info" plain @click="resetSearch">重置</el-button>
    </el-form-item>
  </el-form>
  <el-table
    v-loading="listLoading"
    :data="orderTable"
    element-loading-text="Loading"
    border
    fit
    highlight-current-row
  >
    <el-table-column align="center" width="100" label="序号" >
      <template slot-scope="scope">
        {{ scope.$index+1 }}
      </template>
    </el-table-column>
    <el-table-column label="停车位名称" width="130" >
      <template slot-scope="scope">
        {{ scope.row.parkingSpaceName}}
      </template>
    </el-table-column>
    <el-table-column label="隶属车库" align="center">
      <template slot-scope="scope">
        <span>{{ scope.row.parkingLotName}}</span>
      </template>
    </el-table-column>
    <el-table-column label="驶入时间" prop="arrivalTime" :formatter="formatDate"  align="center">
    </el-table-column>
    <el-table-column label="驶出时间" :formatter="formatDate" prop="departureTime"   align="center">
    </el-table-column>
    <el-table-column label="停车费用" width="110"  align="center">
      <template slot-scope="scope">
        <span>{{ scope.row.price}}元</span>
      </template>
    </el-table-column>

    <el-table-column label="下单用户" width="110"  align="center">
      <template slot-scope="scope">
        <span>{{ scope.row.userName}}</span>
      </template>
    </el-table-column>

    <el-table-column align="center" label="操作" >
      <template v-slot="scope">
        <el-button type="success" v-if="scope.row.status===0"  size="mini" @click="toOver(scope.row.id,scope.row.parkingSpaceId)">完成订单</el-button>
        <el-button type="danger"  size="mini" @click="toDel(scope.row.id)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
    background
    layout="prev, pager, next"
    :total="total"
    :page-size="pageCount"
    @current-change="nextPage"
  >
  </el-pagination>
</div>
</template>
<script >

import {change, delOrder, getPage} from "@/api/order";
import moment from 'moment'

export default {
  name: "order",
  data(){
    return {
      searchForm:{
        pageNow:1,
        parkingLotName:'',
        parkingSpaceName:'',
        userId:'',
        userName:''
      },
      pageCount:4,
      total:0,
      orderTable:[],
      listLoading:true
    }
  },
  created() {
    this.searchForm.userName=sessionStorage.getItem("username");
    this.searchForm.userId=this.$route.query.userId
    this.onSearch()
  },
  methods:{
    toOver(id,psId){
      this.$confirm('确认是否已驶出停车场，完成订单？', '确认信息', {
        distinguishCancelAndClose: true,
        confirmButtonText: '确认',
        cancelButtonText: '取消'
      })
        .then(() => {
          change(id,psId,this.searchForm.userName).then(res=>{
            if(res.code===20000){
              this.$message.success("您已完成订单，祝您一路顺风！")
              this.onSearch();
            }else{
              this.$message.error(res.message)
            }
          })
        })

    },
    toDel(id){
      this.$confirm('此操作将永久删除该订单信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delOrder(id).then(res=>{
          if (res.code===20000){
            this.$message.success("删除成功")
            this.onSearch();
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    nextPage(val){
      this.searchForm.pageNow=val
      this.onSearch();
    },
    onSearch(){
      getPage(this.searchForm,this.pageCount).then(res=>{
        console.log(res.data.records)
        this.orderTable=res.data.records
        this.total=res.data.total
        this.listLoading=false
      })
    },
    resetSearch(){
      this.searchForm.parkingLotName=''
      this.searchForm.parkingSpaceName=''
    },

    formatDate(row,column) {
      let data = row[column.property]
      if (data == null) {
        return null
      }
      return moment(data).format('YYYY-MM-DD HH:mm:ss')
    }
  }
}

</script>



<style scoped>

</style>
